<!DOCTYPE html>
<html lang="en">
<head>
<!-- <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/css/bootstrap-grid.css" rel="stylesheet"> -->
	<link href="../vendor/bootstrap-grid.css" rel="stylesheet">
<meta charset="utf-8"/>
<link rel="apple-touch-icon" sizes="76x76" href="../assets/img/favicon.ico">
<link rel="icon" type="image/png" href="../assets/img/favicon.ico">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport'/>


<!-- Font Awesome Icons -->
<!-- <link rel="stylesheet" href="#" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> -->
    <link rel="stylesheet" href="#"  crossorigin="anonymous">

<!-- Main CSS -->
<link href="../assets/css/main.css" rel="stylesheet"/>

<!-- Animation CSS -->
<link href="../vendor/aos.css" rel="stylesheet"/>
<style>


</style>
</head>

<body>


<main class="container">

<!--------------------------------------
PRICING
--------------------------------------->
<section class="pt-4 pb-5">
<div class="col-md-12">
	<form id="form1">
		<div id="setPriceBox">

		</div>

		<button type="submit" class="btn btn-cyan btn-round text-white mt-3" style="float: right;">提交</button>
	</form>
</div>
</section>



<!--------------------------------------
JAVASCRIPTS
--------------------------------------->
<script src="../vendor/jquery.min.js" type="text/javascript"></script>
<script src="../vendor/popper.min.js" type="text/javascript"></script>
<script src="../vendor/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="../vendor/share.js" type="text/javascript"></script>
<script src="../js/functions.js" type="text/javascript"></script>
<!-- <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.0/js/bootstrap.bundle.js"></script> -->
<script src="../vendor/bootstrap.bundle.js"></script>
<script src="../assets/layui/layui.js" type="text/javascript"></script>
<script src="../js/tool.js" type="text/javascript"></script>


<script>
	$(function () {
		let num = 0;
	    function DataDOM(){
			num ++;
			let deleteHtml="";
			if(num != 1){
				deleteHtml = `<span class="pl-2 deletePriceItem text-danger" style="font-size: 24px;font-weight: 600;cursor: pointer;">-</span>`
			}
			let html = `<div class="setPriceItem">
				<h6>
					<span class="pr-2 addPriceItem text-success" style="font-size: 24px;font-weight: 600;cursor: pointer;">+</span>价格设置 `+num+deleteHtml+`
				</h6>
				<div class="row form-group">
					<div class="col">
						<label>计价方式</label>
						<select class="form-control">
							<option>按次数计费</option>
							<option>按月计费</option>
							<option>按流量计费</option>
						</select>
					</div>
					<div class="col">
						<label>价格</label>
						<input type="text" class="form-control" placeholder="请填写价格" required="">
					</div>
					<div class="col">
						<label>开放用户等级</label>
						<select class="form-control">
							<option>1级（个人账户）</option>
							<option>2级（社会团体）</option>
							<option>3级（事业单位）</option>
							<option>4级（国有企业）</option>
							<option>5级（政府部门）</option>
						</select>
					</div>
				</div>
			</div>`
			$("#setPriceBox").append(html);
	    }
		DataDOM();

		$("#setPriceBox").delegate(".addPriceItem","click",function(){
		   DataDOM();
		});
		$("#setPriceBox").delegate(".deletePriceItem","click",function(){
		   $(this).parents(".setPriceItem").remove();
		});

	})
</script>

</body>
</html>
